<template>
  <div class="panel-data">
    <div class="content">
      <el-form
        ref="form"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="93px"
      >
        <panel-data
          ref="panel_data_common"
          :config="config"
          :widget-instance-id="widgetInstanceId"
          :data-source-type-options="dataSourceTypeOptions"
          :dataForm="form"
          :show-switch-data-mapping="true"
          :tableData_longitudinalData="defaultTableDataLongitudinal"
          :tableData_horizontalData="defaultTableDataHorizontal"
          :is-aurora="isAurora"
        >

          <template #switchDataMapping></template>
          <template #dataMapping="{commonComp}">
            <data-mapping
              v-show="form.dataMappingType === 'longitudinalData'"
              ref="dataMapping_longitudinalData"
              key="longitudinalData"
              :config="config"
              :widget-instance-id="widgetInstanceId"
              :data-source-type-options="dataSourceTypeOptions"
              :dataForm="form"
              :button1-name="$demoi18n('btn.add')"
              :common-comp="commonComp"
              :is-aurora="isAurora"
            ></data-mapping>
          </template>
          <template #switchDataMapping_after>
            <div class="horizontalData_tip">
              <Helptip
                v-if="form.dataMappingType === 'horizontalData'"
                tip-key="uniaxial_bar.horizontalData_tip"
              />
            </div>
            <div class="checkInfo">
              <div
                v-show="!isCheckPass"
                class="mappingErr"
              >{{ $demoi18n('uniaxial-bar.panel-data.mappingErr') }}</div>
            </div>
          </template>
          <template #dataMapping_horizontalData="{commonComp}">
            <data-mapping
              v-show="form.dataMappingType === 'horizontalData'"
              ref="dataMapping_horizontalData"
              key="horizontalData"
              :config="config"
              :widget-instance-id="widgetInstanceId"
              :data-source-type-options="dataSourceTypeOptions"
              :dataForm="form"
              :button1-name="$demoi18n('btn.add')"
              :legend-column-name="$demoi18n('panelData.legendName')"
              :common-comp="commonComp"
              :is-aurora="isAurora"
            ></data-mapping>
          </template>
        </panel-data>
      </el-form>
    </div>
  </div>
</template>
<script>
import PanelData from '@/components/panel-data/panel-data-common';
import panelDataBase from '@/mixin/panel-data-base.js';
import DataMapping from '@/components/panel-data/components/data-mapping-add-row';
import Helptip from '@/components/common/helptip/helptip.vue';
import { $message } from '@/utils/util.js';

export default {
  name: 'UniaxialBarPanelData',
  components: { PanelData, DataMapping, Helptip },
  mixins: [panelDataBase],
  props: ['config', 'widgetInstanceId', 'dataForm', 'dataSourceTypeOptions', 'isAurora'],
  data() {
    const form = JSON.parse(JSON.stringify(this.config.config.data));
    return {
      form,

      // 默认初始的纵向数据
      defaultTableDataLongitudinal: [
        {
          field: 'x',
          mapping: '',
          explain: this.$demoi18n('panelData.explain.horizontalAxis'),
        },
        {
          field: 'y',
          mapping: '',
          explain: this.$demoi18n('panelData.explain.value'),
        },
        {
          field: 's',
          mapping: '',
          explain: this.$demoi18n('panelData.expain.categoryOptional'),
          skipVerification: true,
        },
      ],

      // 默认初始的横向数据
      defaultTableDataHorizontal: [
        {
          field: 'x',
          mapping: '',
          explain: this.$demoi18n('panelData.explain.horizontalAxis'),
          hideLegendName: true,
        },
        {
          field: 'y1',
          mapping: '',
          explain: this.$demoi18n('panelData.explain.value'),
          isDelete: false,
        },
      ],
    };
  },
  computed: {
    isCheckPass() {
      const [xField, yField] = this.form.tableData;
      if (!xField.mapping || !yField.mapping) {
        return true;
      }
      return xField.mapping !== yField.mapping;
    },
  },
  watch: {},
  methods: {
    checkLimit() {
      if (!this.isCheckPass) {
        $message({
          type: 'error',
          message: this.$demoi18n('uniaxial-bar.panel-data.mappingErr'),
        });
      }
      return this.isCheckPass;
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  :deep(.switchDataMapping) {
    float: left;
  }
  .horizontalData_tip {
    float: left;
    .vs_helptip {
      margin: 7px 0px;
    }
  }
  .checkInfo {
    clear: both;
    min-height: 5px;
    .mappingErr {
      color: #f56c6c;
      border: 1px solid #f56c6c;
      padding: 5px 10px;
    }
  }
}
</style>
